今天再介紹三個陣列的方法，明天就要換別的主題囉！

Array.prototype.join()

join() 方法可以將陣列中的值取出來轉變為字串，並且可以加入特定的字元作為每個值中間的符號。

let array = ["水星","火星","地球","木星"];

console.log(array.join(",")); // 水星,火星,地球,木星

// 如果不加符號則會連在一起
console.log(array.join("")); // 水星火星地球木星 

// 加空白
console.log(array.join(" ")); // 水星 火星 地球 木星 

搭配 ES6 的樣板字面值 (Template literal) 寫法則可以用很簡短的程式碼組合出複雜的字串結構

let newHTML = `<ul>${ array.map((item)=>`<li>${item}</li>`).join(" ")}</ul>`;

console.log(newHTML); 
//<ul><li>水星</li> <li>火星</li> <li>地球</li> <li>木星</li></ul>

此範例參考自 卡斯伯：JavaScript 陣列處理方法

字串重組

如果搭配字串方法 split() 則可以將一個中間有空白的字串進行重組，假設今天在輸入帳號時不小心多輸入了許多空白

let str = "cho ca la t e"

這時可以先用字串方法 split() 將該字串先分離開來

str = str.split(" ");

console.log(str);// (5)['cho', 'ca', 'la', 't', 'e']

此時會得到一個陣列，再用陣列方法 join() 將陣列中的值取出來轉變回字串，並且中間不加入任何符號

str = str.join("");

console.log(str);// chocalate 

如此就可以得到中間沒有空白的完整字串

Array.prototype.find()

find() 可以搜尋資料，只會回傳第一筆符合條件(true)的資料，且回傳後就不會再繼續執行後續的程式碼。

const aArray = [5, 15, 25, 55, 100, 215]

const newArr = aArray.find(function (item, index, array){
        return item > 50
    })

console.log(newArr) // 55 雖然答案有三個，但只回傳第一個符合條件的值
console.log(aArray) // (6)[5, 15, 25, 55, 100, 215] 舊陣列一樣不受影響

如果沒有符合的資料則回傳 undefined

const aArray = [5, 15, 25, 55, 100, 215]

const newArr = aArray.find(function (item, index, array){
        return item > 300
    })

console.log(newArr) // undefined

Array.prototype.findIndex()

findIndex() 跟 find() 都是找尋陣列裡面的資料，不一樣的是 find() 是回傳第一個符合條件的值，而 findIndex() 則是回傳該值的索引編號 (index)

const aArray = [5, 15, 25, 55, 100, 215]

const newArrA = aArray.find(function (item, index, array){
        return item > 50
    })
const newArrB = aArray.findIndex(function (item, index, array){
        return item > 50
    })

console.log(newArrA) // 55 雖然答案有三個，但只回傳第一個符合條件的值
console.log(newArrB) // 3 找到第一個符合條件的值是 55 ，回傳該值的索引值為 3

如果沒有符合的資料則回傳 -1

const aArray = [5, 15, 25, 55, 100, 215]

const newArrB = aArray.findIndex(function (item, index, array){
        return item > 300
    })

console.log(newArrB) // -1

陣列方法非常多且有些方法較複雜，需要花比較多時間去理解。雖然後續不再多介紹，相關方法在 MDN 文件裡面有很詳細的解說，也推薦卡斯伯老師的部落格解說得清楚易懂。明天會開始介紹網路請求與非同步囉~

參考資料

線上課程
MDN
卡斯伯：JS 常見陣列方法 [push(), unshift(), pop(), shift(), splice(), reverse(), concat(), include(), indexOf(), join()]